<template>
  <div class="log">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">系统日志</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template slot-scope="s">
            <el-button type="info" icon="search" size="mini" @click="dialogSearchOpen(s.row)"></el-button>
            <el-button type="success" icon="edit" size="mini" v-if="USER.auth.indexOf('system_log_completed')!==-1 && s.row.clzt === '0'" @click="dialogOpen(s.row)"></el-button>
          </template>
        </el-table-column>
        <el-form-item label="错误级别" prop="jb">
          <el-select v-model="autoVue_table_jb" placeholder="请选择">
            <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              v-for="item in LOG.jb"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="记录时间" prop="jlsj">
          <el-date-picker
            v-model="autoVue_table_jlsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="处理状态" prop="clzt">
          <el-select v-model="autoVue_table_clzt" placeholder="请选择">
            <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              v-for="item in LOG.clzt"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}系统日志</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-form-item prop="xx" label="信息">
            <el-input
              type="textarea"
              disabled
              v-model="dialog.row.xx"
              placeholder="信息"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="xx" label="异常原因">
            <el-input
              type="textarea"
              v-model="formDialog.ycyy"
              placeholder="异常原因"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="clr" label="处理人">
              <el-input
                type="text"
                v-model="formDialog.clr"
                placeholder="处理人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="clsj" label="解决时间">
              <el-date-picker
                v-model="formDialog.clsj"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item prop="cljg" label="处理结果">
            <el-input
              type="textarea"
              v-model="formDialog.cljg"
              placeholder="处理结果"></el-input>
          </el-form-item>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearch" :close="dialogSearchInit">
      <p slot="title">查看日志详情<span>{{`${dialogSearch.row.mk}-${dialogSearch.row.an}-${dialogSearch.row.show_jb}`}}</span></p>
      <el-row>
        <h4>信息</h4>
        <p>{{dialogSearch.xx}}</p>
      </el-row>
      <el-row>
        <h4>异常原因</h4>
        <p>{{dialogSearch.ycyy}}</p>
      </el-row>
      <el-button slot="footer" @click="dialogSearch.visible=false">好</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';

  function __form () {
    return {
      clr: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      clsj: { value: '', rule: [ 'vNull__change' ], cRemarks: '', type: 'Date' },
      cljg: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ycyy: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'system_log-FEcarWms',
    head: {
      'title': '系统日志管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 系统日志 查看系统日志信息' },
      ],
    },
    store: ['DICTIONARY_log', 'LOG'],
    data: {
      table: {
        column: [
          { label: '错误级别',
            prop: 'show_jb',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '模块',
            prop: 'mk',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '按钮',
            prop: 'an',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '记录时间',
            prop: 'jlsj',
            minWidth: '0px',
            cRemarks: '',
            type: 'DateRange',
            search: true },
          { label: '处理状态',
            prop: 'clzt',
            minWidth: '0px',
            elTag: {
              filterType: function (value) {
                return value === '1' ? 'success' : 'danger';
              },
            },
            formatter: (row, column) => {
              return row[column.property || column] === '1' ? '已处理' : '未处理';
            },
            cRemarks: '',
            search: true },
          { label: '信息',
            prop: 'xx',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '异常原因',
            prop: 'ycyy',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '处理人',
            prop: 'clr',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '处理时间',
            prop: 'clsj',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '处理方式/结果',
            prop: 'cljg',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '登录名',
            prop: 'dlm',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: 'IP',
            prop: 'ip',
            minWidth: '0px',
            cRemarks: '',
            search: false },
        ],
        url: '/sysLog/list',
        key: 'id',
        tableColumn: 5,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
      dialogSearch: {
        row: {},
        xx: '',
        ycyy: '',
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      dialogOpen (row) {
        if (row) {
          this.dialog.row = row;
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), row),
          };
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        this.VALIDATE('formDialog', async option => {
          option.id = this.dialog.row.id;
          await this.post('/sysLog/processed', option);
          this.tableWatch('table');
          this.dialogInit();
          this.dialog.visible = false;
        });
      },
      dialogSearchInit () {
        this.dialogSearch.xx = '';
        this.dialogSearch.row = {};
        this.dialogSearch.ycyy = '';
      },
      async dialogSearchOpen (row) {
        let {
          xx,
          ycyy,
        } = await this.get('/sysLog/detail/' + row.id);
        this.dialogSearch.xx = xx;
        this.dialogSearch.ycyy = ycyy;
        this.dialogSearch.row = row;
        this.dialogSearch.visible = true;
      },
    },
    mounted: function () {
      if (!this.DICTIONARY_log) {
        this.USE('DICTIONARY_log');
      }
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
